<template>
  <div class="mine banner">
    <el-card class="mine_top">
      <!-- top -->
      <div class="mine_top_first">
        <!-- <img src="/static/mine/bg07.jpg" alt="" class="mine_top_first_bg"> -->
        <div class="mine_top_first_second">
          <div class="mine_top_first_second_left">
            <!-- <img src="" alt=""> -->
            <!-- <img src="/static/mine/avatar05.jpg" alt=""> -->
            <img :src="userMes.uAvatar" alt="" />
            <h3>{{ userMes.nickname }}</h3>
          </div>
          <div class="mine_top_first_second_right">
            <el-button
              v-if="!isLoginUser"
              @click="followUser(userMes.uId)"
              :disabled="disabled"
              >{{ followBtn }}</el-button
            >
            <el-tooltip
              v-else
              class="item"
              effect="dark"
              content="不能关注自己"
              placement="top"
            >
              <el-button>关注</el-button>
            </el-tooltip>
            <!-- <el-button type="primary" size="small" v-if="!isLoginUser" @click="follow">关注</el-button> -->
            <!-- <i class="iconfont icon-diandian"></i> -->
            <el-dropdown @command="handleCommand" v-show="isLoginUser">
              <span class="el-dropdown-link">
                <i class="iconfont icon-diandian"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="a">编辑</el-dropdown-item>
                <el-dropdown-item command="b">注销</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
      <el-dialog
        title="编辑用户信息"
        :visible.sync="dialogFormVisible"
        class="dialog_form"
      >
        <el-form :model="form">
          <el-form-item label="头像" :label-width="formLabelWidth">
            <el-upload
              class="avatar-uploader"
              action="http://localhost:3000/express/avatar"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="form.uAvatar" :src="form.uAvatar" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <!-- <el-input v-model="form.name" autocomplete="off"></el-input> -->
          </el-form-item>
          <el-form-item label="昵称" :label-width="formLabelWidth">
            <el-input v-model="form.nickname" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="updateUserInfo(form)"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <!-- 主页 关注数 -->
      <div class="mine_top_second">
        <el-menu
          default-active="1"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item index="1">
            <!-- 动态 -->
            <router-link to="" class="mine_top_second_link">投稿</router-link>
          </el-menu-item>
          <!-- <el-menu-item index="2">
            <router-link to="/mine/deliver" class="mine_top_second_link">动态</router-link>
          </el-menu-item> -->
        </el-menu>
        <!-- <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="input2">
        </el-input> -->
        <el-row :gutter="40" class="mine_top_second_row">
          <el-col :span="20">
            <div>
              <el-statistic
                group-separator=","
                :value="followMes.length"
                title="关注数"
              ></el-statistic>
            </div>
          </el-col>
          <el-col :span="20">
            <div>
              <el-statistic
                group-separator=","
                :value="userMes.fansNum"
                title="粉丝数"
              ></el-statistic>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <!-- 内容 -->
    <div>
      <trends :attrs = "userMes"></trends>
    </div>
    <el-backtop :visibility-height="100">UP</el-backtop>
  </div>
</template>
<script>
import trends from './Trends.vue'
export default {
  inject: ['reload'], //注入依赖
  name: 'Tabbar',
  components: {
    trends
  },
  data () {
    return {
      followBtn: '关注',
      disabled: false,
      userMes: {},
      followMes: [],
      dialogFormVisible: false,
      form: {
        uAvatar: '',
        nickname: ''
      },
      formLabelWidth: '40px',
      isLoginUser: false
    }
  },
  created () {
    this.userMes = JSON.parse(this.$route.query.userMes)
    // this.getUserInfo()
    console.log(this.cookies.getUid('uId'))
    if (this.cookies.getUid('uId') == this.userMes.uId) {
      this.isLoginUser = true
    } else {
      this.isLoginUser = false
    }
  },
  methods: {
    // 关注用户
    followUser (uId) {
      // 关注用户
      let params = {}
      console.log(uId)
      if (this.cookies.getToken('X-Token') == null) {
        this.$message({
          message: '要先登录才可以关注哦！',
          type: 'warning'
        })
      } else {
        // 点击关注按钮，被关注用户粉丝数+1，登录用户关注用户信息加1
        params.followedId = uId
        params.fansNum = this.userMes.fansNum
        params.uId = this.loginUser.uId
        this.$axios.updateFollow(params).then(res => {
          console.log(res)
          this.followBtn = '已关注'
          this.disabled = res.data.isFollow
          this.userMes.fansNum = res.data.fansNum
        })
      }
    },
    follow () {},
    // 注销账号后退出
    logout () {
      // console.log('退出')
      const params = {}
      // params.token = this.$store.getters.getToken
      // params.token = this.$cookieStore.getCookie('X-Token')
      params.token = this.cookies.getToken('X-Token')
      this.$axios.logout(params).then(res => {
        // console.log(res)
        this.cookies.removeToken('X-Token')
        this.cookies.removeUid('uId')
        this.isLogin = false
        location.reload()
        this.$router.push('/')
      })
    },
    open () {
      this.$confirm('是否确定注销账号, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let uId = this.cookies.getUid('uId')
          this.$axios.deleteUser(uId).then(res => {
            console.log(res)
            if (res.code == 20000) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.logout()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    cancel () {
      this.dialogFormVisible = false
    },
    updateUserInfo (form) {
      console.log(form)
      let user = form
      this.$axios.updateUser(user).then(res => {
        console.log(res)
        if (res.code == 20000) {
          this.getUserInfo()
          this.$message({
            message: res.message+"，重新登录即可查看",
            type: 'success'
          })
        }
      })
      this.dialogFormVisible = false
    },
    handleAvatarSuccess (res, file) {
      console.log(res)
      console.log(file)
      this.form.uAvatar = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      console.log(file)
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleCommand (command) {
      if (command == 'a') {
        this.dialogFormVisible = true
      } else if (command == 'b') {
        this.open()
      }
      // this.$message('click on item ' + command)
    },
    getFollowNum (uId) {
      this.$axios.getFollowNum(uId).then(res => {
        console.log(res)
        this.followMes = res.data
      })
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    // 获取用户信息
    getUserInfo () {
      const params = {}
      if (this.cookies.getToken('X-Token') != undefined) {
        params.token = this.cookies.getToken('X-Token')
        this.$axios.getUserInfo(params).then(res => {
          console.log(res)
          this.userMes = res.data
          this.form = res.data
          this.getFollowNum(res.data.uId)
        })
      }
    }
  }
}
</script>
<style scoped>
.mine {
  margin-top: 20px;
}
.el-card__body,
.el-main {
  padding: 0;
}
.mine_top_first {
  width: 100%;
  height: 200px;
  position: relative;
  background: #afb3af url('/static/mine/bg03.jpg') no-repeat;
  background-size: 100% 100%;
}
.mine_top_first_bg {
  width: 100%;
  height: 200px;
}
.mine_top_first_second {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.el-menu-item {
  padding: 0;
}
.mine_top_second_link {
  display: block;
  padding: 0 20px;
  height: 100%;
  background: #fff;
}
.mine_top_first_second_left {
  display: flex;
  align-items: center;
  color: #fff;
}
.mine_top_first_second_left > img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 10px;
  border: 2px solid rgb(212, 210, 210);
}
.mine_top_first_second_right > .el-button {
  margin-right: 10px;
}
.mine_top_first_second_right i {
  color: #fff;
}

.mine_top_second {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.mine_top_second_row {
  display: flex;
}
.mine_top_second_row > .el-col {
  text-align: center;
  margin-right: 20px;
  margin-top: 10px;
}
.dialog_form {
  width: 700px;
  margin: 10px auto;
}
.avatar-uploader {
  width: 100px;
  height: 100px;
  border: 1px dashed #636262;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: block;
}
</style>
